<template>
	<view class="content" @tap.stop="$refs.uniselect.close()">
        <u-navbar bgColor="#fff" 
            :fixed="true" :shadow="true" :safeAreaInsetTop="true" :placeholder="true"
            @leftClick="back" title="现场管理"  rightIcon="search" @rightClick="rightClick">
        </u-navbar>

        <!-- 内容 -->
        <view class="uni-area">
            <!-- 设备概览 -->
            <view class="u-m-t-40 uni-shadow">
                <view class="u-flex u-row-between">
                    <text class="u-font-32 font-bold">设备概览</text>
                    <view class="u-flex" @tap="colony.show=true">
                        <text class="u-m-r-16 u-font-26">{{colony.label}}</text>
                        <u-icon name="arrow-down" size="13" color="#5D6672"></u-icon>
                    </view>
                </view>
                <u-row class="u-flex u-flex-wrap">
                    <u-col span="3" v-for="(item,index) in equipments" :key="index" class="u-m-t-30">
                        <text class="u-text-center u-font-24 uni-dec-color">{{item.title}}</text>
                        <text class="u-m-t-14 u-text-center u-font-42 font-bold">{{item.value}}</text>
                    </u-col>
                </u-row>
            </view>

            <!-- 下拉选择 时间筛选 -->
            <uni-select-date ref="uniselect" class="u-m-t-40" @select="select"></uni-select-date>
            <!-- 项目 -->
            <uni-item-scene class="u-m-t-40" v-for="(tem,ind) in page.list" :key="ind" :listItem="tem" />

            <!-- 返回顶部 -->
            <u-back-top :scroll-top="page.scrollTop" @tap="toTop"></u-back-top>
            <!-- 加载更多 -->
            <u-loadmore :status="page.status" />

            <!-- 属地 -->
            <u-picker :show="colony.show" :columns="colony.data" keyName="label" :closeOnClickOverlay="true"
                @cancel="colony.show=false" @close="colony.show=false" @confirm="selectColony">
            </u-picker>
        </view>

        <!-- 提示组件 -->
        <u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
                // 属地筛选
                colony:{
                    show: false,
                    label: '一师',
                    districtId: 1,
                    data: [[
                        { label: '一师', value: 1 },
                    ]]
                },
                // 设备预览
                equipments:[ 
                    { filed:'crane', title:'升降机监控', value: 0 },
                    { filed:'cars', title:'车辆监控', value: 0 },
                    { filed:'lift', title:'塔吊监控', value: 0 },
                    { filed:'video', title:'视频监控', value: 0 },
                    { filed:'gate', title:'闸机监控', value: 0 },
                    { filed:'dust', title:'扬尘监控', value: 0 },
                    { filed:'fence', title:'电子围栏', value: 0 },
                ],
                // 设备列表参数
                parameter:{
                    deviceType: '' // 全部设备类型
                },
                paging:{
                    pageNum: 1,
                    pageSize: this.$config.pageSize,
                },
                page:{
                    scrollTop: 0,
                    status: 'nomore',
                    total: 0,
                    list: [], // 列表
                },
			}
		},

        onReady(){},

        onPageScroll(e) {
            this.page.scrollTop = e.scrollTop;
        },
        onReachBottom(){
            if( this.page.list.length < this.page.total ){
                this.paging.pageNum += 1
                this.page.status = 'loading'
                this.getEquipmentList()
            }else{
                this.page.status = 'nomore'
            }
        },

		onLoad() {
            // 属地
            this.$tools.getNationFn(this,{},res=>{
                this.colony.label = res.list[0].label
                this.colony.districtId = res.list[0].value
                this.colony.data.splice(0,1,res.list)
                // 获取设备概览
                this.getEquipmentOverview()
                // 获取设备列表
                this.getEquipmentList()
            })
        },

        
		methods: {
            // 返回
            back(){
                uni.navigateBack()
            },
            // 搜索
            rightClick(){
                uni.navigateTo({ url: '/pages/common/search?type=scene' })
            },


            // 设备概览
            getEquipmentOverview(districtId){
                // uni.showLoading({ title:'设备概览加载中' })
                // // console.log('设备概览-参数',{districtId:this.colony.districtId})
                this.$request(this, this.$apis.scEquipmentOverview,{districtId:this.colony.districtId}).then(res => {
                    // // console.log('设备概览',res)
                    this.equipments.map((v,i)=>{
                        v.value = res[v.filed]
                    })
                }).then()
            },

            // 设备列表
            getEquipmentList(){
                uni.showLoading({ title:'设备列表加载中' })
                const obj1 = {
                    districtId: this.colony.districtId,
                    deviceType: this.parameter.deviceType
                }
                const obj2 = this.paging
                const prameter = Object.assign(obj1,obj2)
                // // console.log('设备列表-参数',prameter)
                this.$request(this, this.$apis.scEquipmentList,prameter).then(res => {
                    // console.log('设备列表',res)
                    this.page.total = res.total
                    if( res.total && res.total != 0 ){
                        this.status = 'loadmore'
                        res.data.map((v,i)=>{
                            this.page.list.push(v)
                        })
                    }else{
                        this.page.total = 0
                        this.page.status = 'nomore'
                        this.$tools.uToast(this,'default','','暂未查询到更多设备相关数据',3000)
                    }
                }).then()
            },


            // 选择属地
            selectColony(e){
                this.colony.label = e.value[0].label
                this.colony.districtId = e.value[0].value
                this.colony.show = false
                // 设备概览
                this.getEquipmentOverview()
                // 设备列表
                this.paging.pageNum = 1
                this.page.list = []
                this.toTop()
                this.getEquipmentList()
            },
            // 下拉选择
            select(e){
                this.parameter[e.type] = e.value
                // 设备列表
                this.paging.pageNum = 1
                this.page.list = []
                this.toTop()
                this.getEquipmentList()
            },


            // 返回顶部
            toTop(){
                uni.pageScrollTo({ scrollTop: 0,  duration: 300 })
            },
		}
	}
</script>

<style scoped lang="scss">
    // .content{}
</style>
